<template>
  <div>
    <el-form :ref="refName" :model="ruleForm" :rules="rules">
      <!-- <el-form-item prop="password">
        <el-input
          v-model="ruleForm.password"
          :placeholder="$t('account.password')"
        />
      </el-form-item> -->
      <el-form-item prop="telPhone">
        <el-input
          v-model="ruleForm.telPhone"
          :disabled="!!defaultPhone"
          :placeholder="$t('account.telPhone')"
        />
      </el-form-item>

      <el-form-item prop="verifyCode">
        <div class="note-input">
          <el-input
            v-model="ruleForm.verifyCode"
            :placeholder="this.$t('account.noteCode')"
            name="verifyCode"
            tabindex="2"
            auto-complete="on"
          />

          <el-button type="primary" :disabled="!!countDown" @click="onGetCode">
            {{ getCodeBtn }}
          </el-button>
        </div>
      </el-form-item>
    </el-form>

    <div class="footer">
      <el-button @click="$emit('onClose')">
        {{ $t('btns.cancel') }}
      </el-button>
      <el-button type="primary" :loading="loading" @click="onSubmit">
        {{ $t(okText) }}
      </el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { validateRegExp } from '@/utils/validate'
import { updateUserPhone } from '@/api/common'
// import { Message } from 'element-ui'

export default {
  name: 'OrderEdit',
  props: {
    visible: {
      default: false,
      type: Boolean
    },
    phoneType: {
      default: '',
      type: String
    },
    defaultPhone: {
      default: '',
      type: String
    }
  },
  data() {
    // 校验电话
    const validatePhone = (rule, value, callback) => {
      if (value && !validateRegExp('phoneNumber', value)) {
        callback(new Error(this.$t('account.phoneNumberFormat')))
      } else {
        callback()
      }
    }
    return {
      refName: 'ruleForm',
      rules: {
        telPhone: [
          {
            required: true,
            message: this.$t('account.mobileReq'),
            trigger: 'blur'
          },
          { validator: validatePhone, trigger: 'blur' }
        ],
        verifyCode: [
          {
            required: true,
            message: this.$t('account.noteReq'),
            trigger: 'blur'
          }
        ]
      },
      ruleForm: {
        telPhone: ''
      },
      countDown: 0
    }
  },
  computed: {
    ...mapGetters(['loading']),
    getCodeBtn() {
      return this.countDown
        ? this.countDown + 's'
        : this.$t('account.sendNoteCode')
    },
    okText() {
      return this.phoneType === 'new' ? 'btns.submit' : 'btns.next'
    }
  },
  mounted() {
    if (this.defaultPhone) {
      this.ruleForm.telPhone = this.defaultPhone
    }
  },
  methods: {
    onSubmit() {
      this.$refs[this.refName].validate(valid => {
        if (!valid) {
          return
        }
        const { telPhone, verifyCode } = this.ruleForm

        updateUserPhone({
          telPhone: telPhone.trim(),
          verifyCode,
          purpose: this.phoneType === 'old' ? 1 : 2
        }).then(({ success }) => success && this.$emit('onOk', this.ruleForm))
      })
    },
    onGetCode() {
      this.$refs[this.refName].validateField(['telPhone'], msg => {
        if (msg) {
          return
        }
        this.$store
          .dispatch('sendCode', {
            template: 'USERINFO_MODIFY',
            telPhone: this.ruleForm.telPhone,
            purpose: this.phoneType === 'old' ? 2 : 1
          })
          .then(isSucess => {
            if (isSucess) {
              this.setCountDown()
            }
          })
      })
    },

    setCountDown() {
      this.countDown = 60
      let downIntrval = setInterval(() => {
        this.countDown -= 1
        if (this.countDown <= 0) {
          clearInterval(downIntrval)
          downIntrval = null
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
// 短信输入框
.note-input {
  display: flex;
  & > div {
    width: 50%;
  }
  & > button {
    width: 50%;
  }
}

.footer {
  text-align: center;
}
</style>
